<template>
  <div id="product" ></div>
  <div id="category" ></div>
  <div id="brand" ></div>
</template>

<script setup >
import * as echarts from 'echarts';
import {onMounted, ref} from "vue";
import * as myChart from "echarts";
import emitter from "@/utils/buts";
import {useBlackSotre} from "@/stores/black";
const isBlack = useBlackSotre()
const columns2 = [
  {
    value: 5,
    groupId: 'animals'
  },
  {
    value: 2,
    groupId: 'fruits'
  },
  {
    value: 4,
    groupId: 'cars'
  }
]
// 绘制图表
onMounted(()=>{
  var chartDom = document.getElementById('product');
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    title: {
      text: '当前电脑配件排行榜',
      // top: ,
      style: {
        color: 'red',
        showBackground: true,
        backgroundStyle: {color:'red'}
      },
    },

    xAxis: {
      data: ['Animals', 'Fruits', 'Cars']
    },
    yAxis: {},
    dataGroupId: '',
    animationDurationUpdate: 500,
    series: {
      type: 'bar',
      id: 'sales',
      data: columns2,
      color:'red',
      universalTransition: {
        enabled: true,
        divideShape: 'clone'
      }
    }
  };
  const drilldownData = [
    {
      dataGroupId: 'animals',
      data: [
        ['Cats', 4],
        ['Dogs', 2],
        ['Cows', 1],
        ['Sheep', 2],
        ['Pigs', 1]
      ]
    },
    {
      dataGroupId: 'fruits',
      data: [
        ['Apples', 4],
        ['Oranges', 2]
      ]
    },
    {
      dataGroupId: 'cars',
      data: [
        ['Toyota', 4],
        ['Opel', 2],
        ['Volkswagen', 2]
      ]
    }
  ];
  myChart.on('click', function (event) {
    if (event.data) {
      var subData = drilldownData.find(function (data) {
        return data.dataGroupId === event.data.groupId;
      });
      if (!subData) {
        return;
      }
      myChart.setOption({
        xAxis: {
          data: subData.data.map(function (item) {
            return item[0];
          })
        },
        title: {
          text: event.data.groupId
        },
        series: {
          type: 'bar',
          id: 'sales',
          dataGroupId: subData.dataGroupId,
          data: subData.data.map(function (item) {
            return item[1];
          }),
          universalTransition: {
            enabled: true,
            divideShape: 'clone'
          }
        },
        graphic: [
          {
            type: 'text',
            left: 20,
            top: 25,
            style: {
              text: '返回',
              fontSize: 18,
              color: 'rgba(180, 180, 180, 0.2)',
              showBackground: true,
              backgroundStyle: {color:'rgba(180, 180, 180, 0.2)'}
            },
            onclick: function () {
              myChart.setOption(option);
            }
          }
        ]
      });
    }
  });
  var chartDom2 = document.getElementById('category');
  var myChart2 = echarts.init(chartDom2);
  var option2;

  option2 = {
    title: {
      text: '各类型销量涨势图',
      marginBottom:70
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
      top:'3%'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: 'Union Ads',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: 'Video Ads',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: 'Direct',
        type: 'line',
        stack: 'Total',
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: 'Search Engine',
        type: 'line',
        stack: 'Total',
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  };
  var chartDom3 = document.getElementById('brand');
  var myChart3 = echarts.init(chartDom3);
  var option3;
  option3 = {
    title: {
      text: 'Referer of a Website',
      subtext: 'Fake Data',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      bottom: '2%',
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  option && myChart.setOption(option);
  option2 && myChart2.setOption(option2);
  option3 && myChart3.setOption(option3);
  const addEventListener=(e)=>{
    // 释放资源
    myChart.dispose();
    myChart2.dispose();
    myChart3.dispose();
    // 重新渲染图表

    myChart = echarts.init(chartDom,e);
    myChart2 = echarts.init(chartDom2,e);
    myChart3 = echarts.init(chartDom3,e);
    option && myChart.setOption(option);
    option2 && myChart2.setOption(option2);
    option3 && myChart3.setOption(option3);
  }
  emitter.on("chart", (data) => {
    addEventListener(data); //需要调用的方法
  });

})
onMounted(()=>{
  if (isBlack.black==false){
    emitter.emit('chart','dark')
  }
})

</script>
<style lang="scss" scoped>
#product{
  height:500px;
  width:300px;
  margin:auto;
  margin-top:10px;
  border-radius: 10px;
  background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}
#category{
  height:500px;
  width:300px;
  margin:auto;
  margin-top:10px;
  border-radius: 10px;
  background-image: linear-gradient(to top, #96fbc4 0%, #f9f586 100%);
}
#brand{
  height:300px;
  width:300px;
  margin:auto;
  margin-top:10px;
  border-radius: 10px;
  background-image: linear-gradient(to top, #96fbc4 0%, #f9f586 100%);
}
</style>